﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CardView 卡片视图</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    <style>
    .item
    {
        float:left;
        width:116px;
        height:140px;
        border:solid 1px #ccc;
        border-radius:4px;
        margin-left:4px;
        margin-top:4px;
    }
    .item-inner
    {
        width:100%;
    }
    .item-image
    {
        
        height:70px;
        width:85px;
        margin:auto;
        margin-top:8px;
        display:block;    
    }
   
    .item-text
    {
        text-align:center;
        font-size:16px;
        font-family:"微软雅黑";
        letter-spacing:5px;
        font-weight:bold;
        padding-top:5px;
    }
    
    .item-action
    {
        text-align:right;
        padding-right:6px;
    }
    
    .button
    {
        display: inline-block;
        padding: 3px 8px;
        font-size: 13px;
        font-weight: normal;
        line-height: 1.4;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle; 
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 4px;       
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
    }
    </style>
        
</head>
<body >
    <h1>CardView 卡片视图</h1>      
    
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:300px;" showHeader="true" title="Card View"
    url="countrys.txt"  idField="id" allowResize="true" showPager="false"
    viewType="cardview" itemRenderer="itemRenderer" showColumns="false"
>
    <div property="columns">

    </div>
</div>   
   
    <script type="text/javascript">
        
        mini.parse();


        var grid = mini.get("datagrid1");

        grid.load();
      
        function itemRenderer(record, rowIndex, meta, grid) {
        
            meta.rowCls = "item";
            var html = '<div class="item-inner">'
                    + '<img class="item-image" src="countries/' + record.url + '"/>'
                    + '<div class="item-text">' + record.name + '</div>'
                    +'<div class="item-action"><button class="button add">收藏</button></div></div>';
            return html;
        }


        $(grid.el).on("click", ".add", function (event) {
            var record = grid.getRowByEvent(event);
            alert(record.name);

        });

    </script>

    <div class="description">
        <h3>Description</h3>
        <ol>
            <li>viewType="cardview"</li>
            <li>itemRenderer(record, rowIndex, meta, grid)</li>
        </ol>
    </div>


  

</body>
</html>